<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" rel="stylesheet" href="css/user.css"/>
    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>

<div id="app">
    <table class="altrowstable" id="alternatecolor">
        <tr>
            <th>用户编号</th>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>删除操作</th>
        </tr>
        <tr v-for="user in users">
            <td>{{user.id}}</td>
            <td>{{user.userName}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex==1?'男':'女'}}</td>
            <td>{{user.birthday}}</td>
            <td><input type="button" @click="deletes(user.id)" value="删除"></td>
            <!--<td> <el-button type="text" @click="open(user.id)">删除</el-button></td>-->
        </tr>
    </table>

</div>

    <script>
           var  vue = new Vue({
               el:"#app",
               data:{
                   users:[]
               },
               created(){
                   axios.get("user/findAll").then((res)=>{
                       this.users=res.data
                   })
               },
               methods:{
                   deletes(id){
                       alert("id:"+id)
                       // axios.get("user/delete?"+id+"").then((res)=>{
                       axios.get("user/delete?id="+id+"").then((res)=>{

                       }).catch((e)=>{
                           console.log("发生异常了"+e)
                       })
                   }
               }
               // methods: {
               //     open() {
               //         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
               //             confirmButtonText: '确定',
               //             cancelButtonText: '取消',
               //             type: 'warning'
               //         }).then(() => {
               //             this.$message({
               //                 type: 'success',
               //                 message: '删除成功!'
               //             });
               //         }).catch(() => {
               //             this.$message({
               //                 type: 'info',
               //                 message: '已取消删除'
               //             });
               //         });
               //     }
               // }
           })

    </script>

</body>
</html>